import React, { Component, Suspense } from 'react';
import { connect } from 'dva';
import GridContent from '@/components/PageHeaderWrapper/GridContent';
import PageLoading from '@/components/PageLoading';
import { Card, Button, Icon, Modal, message, Form, Input, Checkbox, Col, Row,Tag,Select,Radio,InputNumber,TimePicker,DatePicker } from 'antd';
import styles from './index.less';

const dateFormat = 'YYYY-MM-DD';
const timeFormat = 'HH:mm:ss';
const { Option } = Select;
const { TextArea } = Input;
const { Search } = Input;
import addImg from '@/assets/dialog/add1.png';
import delImg from '@/assets/dialog/del.png';
import moveImg from '@/assets/dialog/start/move.png';
const formItemLayout = {
  labelCol: { span: 3 },
  wrapperCol: { span: 20 },
};

class Item extends Component {
  constructor(props) {
    super(props);
    this.state = {
      slotIndex:"",
      itemIndex:"",
      index:"",
      slotArr:[],
      value:""
    };
  }

  addQuestion =(e)=>{
    const {caseArr} = this.props;
    if(e.target.value ===''){
      return message.error('触发条件不能为空')
    }
    caseArr.push(e.target.value);
    this.setState({
      value:''
    },()=>{
      this.upDataByCallBack(caseArr)
    })
  };

  upDataByCallBack=(res)=>{
    const {upNewData} = this.props;
    upNewData(res)
  };

  addCase=()=>{
    const {caseArr} = this.props;
    const {value} = this.state;
    if(value ===''){
      return message.error('触发条件不能为空')
    }
    caseArr.push(value);
    this.setState({
      value:''
    },()=>{
      this.upDataByCallBack(caseArr)
    })
  };

  forMapItemCase=(caseItem,index)=>{
    const {dialogSlots} = this.props;
    return (
      <Row className={styles.item}>
        <div>
          <Input
            onChange={e=>this.fixQuestion(e,index)}
            ref={`resemblance${index}`}
            placeholder="请输入相似问题，点击回车键继续添加"
            style={{marginTop:10}}
            value={caseItem}
            className={styles.inputItem}
          />
          <div>
            {
              dialogSlots.map((slotItem,indexa)=>{
                return (
                  <Button key={indexa} htmlType='button' shape="round"  style={{marginRight:10,marginTop:10,color:"skyblue",border:'1px solid skyblue'}} onClick={()=>this.addSlotToQuestion(slotItem.slotName,index)}>&lt;{slotItem.slotName}&gt;</Button>
                )
              })
            }
          </div>
        </div>
          <span className={styles.tool}>
            <img src={delImg} alt="" onClick={()=>this.delCase(index)} className={styles.toolImg} />
            <img src={moveImg} alt=""  onClick={()=>this.upCase(index)} className={styles.toolImg} />
          </span>
      </Row>
    )
  };

  addSlotToQuestion=(val,index)=>{
    const {caseArr} = this.props;
   if(index !== undefined){
      caseArr[index] = `${caseArr[index]}<${val}>`;
     const resemblanceX = `resemblance${index}`;
     this.refs[resemblanceX].focus();
     this.upDataByCallBack(caseArr)
   }else {
      const value = `${this.state.value}<${val}>`;
      this.similarInput.focus();
      this.setState({
        value
      });
    }
  };

  delCase=(index)=>{
    const {caseArr} = this.props;
    caseArr.splice(index,1);
    this.upDataByCallBack(caseArr)
  };

  upCase=(index)=>{
    const {caseArr} = this.props;
    const caseIndexItem = caseArr[index];
    caseArr.splice(index,1);
    caseArr.unshift(caseIndexItem);
    this.upDataByCallBack(caseArr)
  };

  fixQuestion=(e,index)=>{
    const {caseArr} = this.props;
    if(index !==undefined){
      caseArr[index] = e.target.value;
      this.upDataByCallBack(caseArr)
    }else{
      this.setState({
        value: e.target.value
      })
    }
  };

  render() {
    const {caseArr,dialogSlots} = this.props;
    const CaseChild = caseArr.map((item,index)=>this.forMapItemCase(item,index));
    const  {value} = this.state;
    return (
      <GridContent>
        <Suspense fallback={<PageLoading />}>
          <Row>
            <Col span={20}>
              <Input
                onChange={e=>this.fixQuestion(e)}
                ref={(input) => { this.similarInput = input; }}
                placeholder="请输入相似问题，点击回车键继续添加"
                onPressEnter={e=>this.addQuestion(e,false)}
                value={value}
                className={styles.inputItem}
              />
              <div>
                {
                  dialogSlots.map((slotItem,index)=>{
                    return (
                      <Button key={index} htmlType='button' shape="round"  style={{marginRight:10,marginTop:10,color:"skyblue",border:'1px solid skyblue'}} onClick={()=>this.addSlotToQuestion(slotItem.slotName)}>&lt;{slotItem.slotName}&gt;</Button>
                    )
                  })
                }
              </div>
            </Col>
            <Col span={2}>
              {/*<Icon type="plus-circle" onClick={()=>this.addCase()} style={{ fontSize: 20, marginLeft: 10, cursor: 'pointer', marginTop: 5 }} />*/}
              <span>
                <img src={addImg} onClick={this.addCase} alt="" height={47} style={{cursor:'pointer'}}/>
              </span>
            </Col>
          </Row>
          {CaseChild}
        </Suspense>
      </GridContent>
    );
  }
}
export default connect (({ user }) => ({
  currentUser: user.currentUser
}))(Form.create()(Item));
